<template>
  <div class="m-page">
    <m-header title="安灯预警看板"></m-header>
    <div class="m-body">
      <m-row :gutter="20" class="first-floor">
        <m-col :span="8">
          <m-box title="安灯处理效率" class="first-board">
            <m-row class="number-board">
              <m-col :span="8">
                <m-num-board color="#FFF8DC" title="待响应" :number="listOnlyBillReport.prQty" />
              </m-col>
              <m-col :span="8">
                <m-num-board color="#BA55D3" title="处理中" :number="listOnlyBillReport.pipQty" />
              </m-col>
              <m-col :span="8">
                <m-num-board color="#BA55D3" title="已处理" :number="listOnlyBillReport.pQty" />
              </m-col>
            </m-row>
          </m-box>
        </m-col>
        <m-col :span="16">
          <m-box title="安灯本月异常情况">
            <m-row>
              <m-col :span="4" class="pie-col">
                <div class="q-pie-chart">
                  <dv-active-ring-chart :config="{
                    data: [{
                      name: '异常数',
                      value: adIncidentAbnormalReportCount
                    },],
                    showOriginValue: true,
                    radius: 80,
                    activeRadius: 80,
                    lineWidth: 10
                  }" style="width:200px;height:200px;margin-top:110px" />
                </div>
              </m-col>
              <m-col :span="10" style="height: 270px;">
                <m-box title="异常模块">
                  <m-box v-for="(item, index) in adIncidentAbnormalReport" :key="index" style="height:50px">
                    <m-row>
                      <m-col :span="2">
                        <div class="circle"></div>
                      </m-col>
                      <m-col :span="4" class="top" :style="{ '--background-color': 'red' }">TOP{{ index + 1 }}</m-col>
                      <m-col :span="14"><span>{{ item.STATION_NAME }}</span></m-col>
                      <m-col :span="4">{{ item.rate }} % </m-col>
                    </m-row>
                  </m-box>
                </m-box>
              </m-col>
              <m-col :span="10" style="height: 270px;">
                <m-box title="异常类型">
                  <m-box v-for="(item, index) in adIncidentAbnormalReport" :key="index" style="height:50px">
                    <m-row>
                      <m-col :span="2">
                        <div class="circle"></div>
                      </m-col>
                      <m-col :span="4" class="top" :style="{ '--background-color': 'red' }">TOP{{ index + 1 }}</m-col>
                      <m-col :span="14"><span>{{ item.STATION_NAME }}</span></m-col>
                      <m-col :span="4">{{ item.qty }}</m-col>
                    </m-row>
                  </m-box>
                </m-box>
              </m-col>
            </m-row>
          </m-box>
        </m-col>
      </m-row>
      <m-row :gutter="20" class="second-floor">
        <m-col :span="24">
          <m-box title="安灯异常明细">
            <m-scroll-board :row-num="8" :loading="adIncidentAbnormalListReportLoading"
              :cols="adIncidentAbnormalListReportCols" :datas="adIncidentAbnormalListReportData" />
          </m-box>
        </m-col>
      </m-row>
    </div>
  </div>
</template>

<script setup>
// 其他方法
import http from '@/utils/request'
// vue提供的api
import { ref, onBeforeMount } from 'vue'

// 安灯异常明细
const adIncidentAbnormalListReportCols = ref([
  { width: 40, title: '序号', type: 'seq', align: 'center' },
  {
    width: 200,
    title: '状态',
    property: 'STATION_NAME',
    formatter: ({ value }) => statusFormat(value)
  },
  { width: 200, title: '车间', property: 'ORG_NAME' },
  { width: 200, title: '异常模块', property: 'INCIDENT_NAME' },
  { width: 550, title: '故障描述', property: 'INCIDENT_DESC' },
  { width: 200, title: '负责人', property: 'USER_ASSIGNED' },
  { width: 200, title: '报障时间', property: 'DATETIME_CREATED' },
  { width: 200, title: '处理时间', property: 'DATETIME_MODIFIED' },
])

// 随机生成颜色值
function statusFormat(value) {
  const r = Math.floor(Math.random() * 256)
  const g = Math.floor(Math.random() * 256)
  const b = Math.floor(Math.random() * 256)
  return `<span style="color: rgb(${r}, ${g}, ${b})">${value}</span>`
}


const adIncidentAbnormalListReportData = ref([])
const adIncidentAbnormalListReportLoading = ref(false)


// 安灯处理效率
const listOnlyBillReportLoading = ref(false)
const listOnlyBillReport = ref({
  prQty: 0, // 待响应
  pipQty: 0, // 处理中
  pQty: 0 // 已处理
})
const getListOnlyBillReport = async () => {
  try {
    listOnlyBillReportLoading.value = true
    const data = await http.get('v1/kanban/getAdIncidentReport');
    listOnlyBillReport.value = data;
    listOnlyBillReportLoading.value = false;
  } catch (error) {
    console.log(error);
    listOnlyBillReportLoading.value = false;
  }
}


// 安灯本周异常明细
const adIncidentAbnormalReportLoading = ref(false)
const adIncidentAbnormalReport = ref([])
const adIncidentAbnormalReportCount = ref(0)
const getAdIncidentAbnormalReport = async () => {
  try {
    adIncidentAbnormalReportLoading.value = true
    const data = await http.get('v1/kanban/getAdIncidentAbnormalReport');
    adIncidentAbnormalReport.value = data.data;
    adIncidentAbnormalReportCount.value = data.Count;
    adIncidentAbnormalReportLoading.value = false;
  } catch (error) {
    console.log(error);
    adIncidentAbnormalReportLoading.value = false;
  }
}

// 获取 安灯异常明细 数据
const getAdIncidentAbnormalListReport = async () => {
  try {
    adIncidentAbnormalListReportLoading.value = true
    const data = await http.get('v1/kanban/getAdIncidentAbnormalListReport', { pageindex: 1, pagesize: 100 });
    adIncidentAbnormalListReportData.value = data.data;
    adIncidentAbnormalListReportLoading.value = false;
  } catch (error) {
    console.log(error);
    adIncidentAbnormalListReportLoading.value = false;
  }
}

function init() {
  // 获取安灯处理效率
  getListOnlyBillReport();
  // 获取安灯本周异常情况
  getAdIncidentAbnormalReport();
  // 获取 安灯异常明细 数据
  getAdIncidentAbnormalListReport();
}

let timeId = null;
onBeforeMount(async () => {
  init();
  timeId = setInterval(() => {
    init()
  }, 1000 * 60 * 10)
})

onBeforeUnmount(async () => {
  clearInterval(timeId)
})
</script>
<style lang="less" scoped>
.m-page {
  .m-body {
    >.m-row {
      margin-bottom: 0;
      color: white;

      .first-board {
        position: relative;

        .number-board {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      &.first-floor {
        height: 350px;
        overflow: hidden;

        .m-col {
          height: 100%;

          .m-row {
            margin-bottom: 0;

            ::v-deep(.m-col) {
              position: relative;

              .m-num-board,
              .m-percent-pond {
                width: 100%;

                .title {
                  padding-top: 0;
                }
              }
            }
          }

          .pie-col {
            height: 100%;

            .q-pie-chart {
              // width: 30%;
              height: 200px;
              margin: 0 auto;
              display: flex;
              justify-content: center;
              align-items: center;

              ::deep(.dv-active-ring-chart .active-ring-info .active-ring-name) {
                height: 40px;
              }
            }
          }
        }
      }


      &.second-floor {
        height: calc(100% - 350px);

        .m-col {
          height: 100%;
        }
      }
    }
  }
}

.circle {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
}

.top::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--background-color);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
